<template>
    <div id="broadCast-detail">
        <div class="broadCast-detail-title">广播详情</div>
        <el-form ref="formData" :model="formData" label-width="130px">
            <el-form-item label="举报id：">
                <span>{{formData.id}}</span>
            </el-form-item>
            <el-form-item label="举报人昵称：">
                <span>{{formData.reporterName}}</span>
            </el-form-item>
            <el-form-item label="被举报人昵称：">
                <span>{{formData.nickname}}</span>
            </el-form-item>
            <el-form-item label="城市：">
                <span>{{formData.city}}</span>
            </el-form-item>
            <el-form-item label="举报时间：">
                <span>{{formData.createTime}}</span>
            </el-form-item>
            <el-form-item label="举报原因：">
                <span>{{formData.content}}</span>
            </el-form-item>
        </el-form>
        <div class="ui-img">
            <p class="ui-img-title">配图</p>
            <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :file-list="imageUrl"
                :limit="limit"
                list-type="picture-card">
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="imageUrl" alt="">
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    name: 'user-man-detail',
    data () {
        return {
            site_id: '',
            formData: {
                account: '0000001',
                likers: '12',
                area: '广东 广州',
                nickname: '大菠萝',
                evaluate: '有趣'
            },
            imageUrl: [],
            limit: 0,
            dialogVisible: false
        }
    },
    created () {
        this.formData = {
            account: '',
            likers: '',
            area: '',
            nickname: '',
            evaluate: ''
        }
    },
    mounted () {
        // 获取详情数据
        var data = this.$route.params.data
        this.formData = {
            id: data.id,
            reporterName: data.reporterName,
            nickname: data.nickname,
            city: data.city,
            signNum: data.signNum,
            createTime: data.createTime,
            content: data.content
        }
        var list = data.images.split(',')
        this.limit = list.length
        for (var i = 0; i < list.length; i++) {
            this.imageUrl.push({
                name: list[i].substring(list[i].length - 12),
                url: list[i]
            })
        }
    },
    methods: {
        handleRemove (file, fileList) {
            console.log(file, fileList)
        },
        handlePictureCardPreview (file) {
            this.imageUrl = file.url
            this.dialogVisible = true
            // console.log(this.dialogImageUrl)
        }
    }
}
</script>

<style lang="less" scoped>
    #broadCast-detail {
        width: 740px;
        height: 100%;
        padding: 10px 0;
        .broadCast-detail-title{
            font-size: 22px;
            margin-bottom: 10px;
        }
        .el-form-item{
            display: inline-block;
            margin-bottom: 0;
            width: 360px;
        }
        .el-form-item__content{
            height: 30px;
        }
        .el-form-item__label{
            height: 30px;
        }
        .btn-height{
            width: 720px;
            padding: 10px 0 20px 0;
        }
        .ui-img{
            display: block;
            padding: 8px 48px;
        }
        .ui-img-title{
            display: block;
            line-height: 36px;
            font-size: 18px;
        }
    }
</style>
